import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'TimePickerMixin',
})
export default class extends Vue {
  mounted(): void {
    const _this = this
    setTimeout(() => {
      if (_this.TimePickerInsList && _this.TimePickerInsList.length !== 0) {
        _this.TimePickerInsList.forEach((i: any) => {
          i.handleClickIcon = (event: any) => {
            _this.handleClickIconFn(event, i)
          }
        })
      }
    })
  }

  private handleClickIconFn(event: any, i: any): void {
    if (i.readonly || i.pickerDisabled) return
    if (i.showClose) {
      this.showCloseFn(event, i)
      setTimeout(() => {
        this.showCloseFn(event, i)
      }, 100)
    } else {
      i.pickerVisible = !i.pickerVisible
    }
  }

  private showCloseFn(event: any, self: any): void {
    self.valueOnOpen = self.value
    event.stopPropagation()
    self.emitInput(null)
    self.emitChange(null)
    self.showClose = false
    if (self.picker && typeof self.picker.handleClear === 'function') {
      self.picker.handleClear()
    }
  }
}
